<template>
  <div>
    <el-card>
      <div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 18px; font-weight: bold;">会员等级折扣管理</span>
        <el-button type="primary" @click="openAddDialog">新增折扣</el-button>
      </div>
      <el-table :data="discounts" style="width: 100%">
        <el-table-column prop="level" label="会员等级" width="120" />
        <el-table-column prop="discountRate" label="折扣率" width="120">
          <template #default="scope">
            <span>{{ (scope.row.discountRate * 100).toFixed(0) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="会员等级">
          <el-select v-model="form.level" :disabled="dialogType==='edit'">
            <el-option label="普通会员" value="NORMAL" />
            <el-option label="银卡会员" value="SILVER" />
            <el-option label="金卡会员" value="GOLD" />
            <el-option label="钻石会员" value="DIAMOND" />
          </el-select>
        </el-form-item>
        <el-form-item label="折扣率">
          <el-input-number v-model="form.discountRate" :min="0.1" :max="1" :step="0.01" :precision="2" />
          <span style="margin-left:8px;">（如0.95表示95折）</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLevelDiscounts,
  addLevelDiscount,
  updateLevelDiscount,
  deleteLevelDiscount
} from '@/api/levelDiscount'

export default {
  name: 'LevelDiscount',
  data() {
    return {
      discounts: [],
      dialogVisible: false,
      dialogType: 'add',
      dialogTitle: '',
      form: {
        id: null,
        level: '',
        discountRate: 1
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getLevelDiscounts().then(res => {
        this.discounts = res.data
      })
    },
    openAddDialog() {
      this.dialogType = 'add'
      this.dialogTitle = '新增折扣'
      this.form = { id: null, level: '', discountRate: 1 }
      this.dialogVisible = true
    },
    openEditDialog(row) {
      this.dialogType = 'edit'
      this.dialogTitle = '编辑折扣'
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleSave() {
      if (this.dialogType === 'add') {
        addLevelDiscount(this.form).then(() => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.loadData()
        })
      } else {
        updateLevelDiscount(this.form).then(() => {
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.loadData()
        })
      }
    },
    handleDelete(id) {
      this.$confirm('确定删除该折扣配置吗？', '提示', { type: 'warning' })
          .then(() => {
            deleteLevelDiscount(id).then(() => {
              this.$message.success('删除成功')
              this.loadData()
            })
          })
    }
  }
}
</script>